<template>
  <div
    class="el-progress"
    :class="[
      'el-progress--' + type,
      status ? 'is-' + status : '',
      {
        'el-progress--without-text': !showText,
        'el-progress--text-inside': textInside,
      }
    ]"
    role="progressbar"
    :aria-valuenow="percentage"
    aria-valuemin="0"
    aria-valuemax="100"
  >

    <div class="el-progress-bar" v-if="type === 'line'">

      <div class="el-progress-bar__outer progress-bar-outer" :style="{height: strokeWidth + 'px'}"
           style="overflow: visible">

        <div class="el-progress-bar__inner progress-bar-inner" :style="barStyle">
          <div class="el-progress-bar__innerText " v-if="showText && textInside">{{percentage}}%</div>
          <div class="tooltips-bar">
            <div class="top">{{title}}</div>
            <div class="shipment">Shipment:{{shipment}}</div>
            <div class="center">{{title === 'Lifecycle attain' ? 'Lifecycle' : 'Volume'}}：{{volumeOrLife}}</div>
            <div class="bottom">{{title === 'Lifecycle attain' ? title : 'Plan exit volume'}}：{{percentage}}%</div>
          </div>
        </div>

      </div>
    </div>
    <div class="el-progress-circle" :style="{height: width + 'px', width: width + 'px'}" v-else>
      <svg viewBox="0 0 100 100">
        <path class="el-progress-circle__track" :d="trackPath" stroke="#e5e9f2" :stroke-width="relativeStrokeWidth"
              fill="none"></path>
        <path class="el-progress-circle__path" :d="trackPath" stroke-linecap="round" :stroke="stroke"
              :stroke-width="relativeStrokeWidth" fill="none" :style="circlePathStyle"></path>
      </svg>
    </div>
    <div
      class="el-progress__text"
      v-if="showText && !textInside"
      :style="{fontSize: progressTextSize + 'px'}"
    >
      <template v-if="!status">{{percentage}}%</template>
      <i v-else :class="iconClass"></i>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'ElProgress',
    props: {
      title: {},
      shipment: {},
      volumeOrLife: {},
      strokeColor: {
        type: String,
        default: '#F5A623'
      },
      tooltip: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        default: 'line',
        validator: val => ['line', 'circle'].indexOf(val) > -1
      },
      percentage: {
        type: Number,
        default: 0,
        required: true,
//        validator: val => val >= 0 && val <= 100
      },
      status: {
        type: String
      },
      strokeWidth: {
        type: Number,
        default: 6
      },
      textInside: {
        type: Boolean,
        default: false
      },
      width: {
        type: Number,
        default: 126
      },
      showText: {
        type: Boolean,
        default: true
      }
    },
    computed: {
      barStyle() {
        var style = {};
        let newPercentage;
        this.percentage>100?newPercentage=100:newPercentage=this.percentage;
        style.width = newPercentage + '%';
        style.background=this.strokeColor;
        return style;
      },
      relativeStrokeWidth() {
        return (this.strokeWidth / this.width * 100).toFixed(1);
      },
      trackPath() {
        var radius = parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);

        return `M 50 50 m 0 -${radius} a ${radius} ${radius} 0 1 1 0 ${radius * 2} a ${radius} ${radius} 0 1 1 0 -${radius * 2}`;
      },
      perimeter() {
        var radius = 50 - parseFloat(this.relativeStrokeWidth) / 2;
        return 2 * Math.PI * radius;
      },
      circlePathStyle() {
        var perimeter = this.perimeter;
        return {
          strokeDasharray: `${perimeter}px,${perimeter}px`,
          strokeDashoffset: (1 - this.percentage / 100) * perimeter + 'px',
          transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
        };
      },
      stroke() {
        var ret;
        switch (this.status) {
          case 'success':
            ret = '#13ce66';
            break;
          case 'exception':
            ret = '#ff4949';
            break;
          default:
            ret = '#20a0ff';
        }
        return ret;
      },
      iconClass() {
        if (this.type === 'line') {
          return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-cross';
        } else {
          return this.status === 'success' ? 'el-icon-check' : 'el-icon-close';
        }
      },
      progressTextSize() {
        return this.type === 'line'
          ? 12 + this.strokeWidth * 0.4
          : this.width * 0.111111 + 2;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .progress-bar-outer {
    border-radius: 0;
    .progress-bar-inner {
      border-radius: 0;
      background-color: rgb(245, 166, 35);
      .tooltips-bar {
        display: none;
        padding: 8px 5px 0;
        position: absolute;
        right: -45px;
        top: -100px;
        width: 158px;
        background-color: rgba(255, 91, 0, 0.30);
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.20);
        border-radius: 6px;
        height: 84px;
        border: 1px solid red;
        z-index: 999;
        &:after {
          position: absolute;
          top: 74px;
          left: 60px;
          content: '';
          display: inline-block;
          /*background: #fff;*/
          /*width: 10px;*/
          /*height: 10px;*/
          border-width: 10px;
          border-style: solid;
          /*border-top: 1px solid #d1dbe5;*/
          /*border-right: 1px solid #d1dbe5;*/
          border-color: rgba(255, 91, 0, 0.30) transparent transparent transparent;
          transform: rotate(-45deg);
          -webkit-transform: rotate(135deg);
        }
        .top {
          font-family: OpenSans-CondensedBold;
          font-size: 14px;
          color: #000;
          flex: 1;
        }
        .center,.shipment,.bottom {
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #666666;
          flex: 1;
        }
        div{
         text-align: left;
        }
      }
      &:hover .tooltips-bar {
        display: flex;
        flex: 1;
        flex-direction: column;
      }
    }
  }

</style>
